import React, { useEffect, useCallback, useState } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { FinancialFromType } from '../../../../assets/enum'
import { getAccOverallParticular } from '../../financialApi'
import Popularize from './components/Popularize'
import Tender from './components/Tender'
import Commission from './components/Commission'
import Transportation from './components/Transportation'
import WaterElectricOil from './components/WaterElectricOil'
import ElseCost from './components/ElseCost'
import BusinessTravel from './components/BusinessTravel'
import Car from './components/Car'
import Entertain from './components/Entertain'
import Serve from './components/Serve'
import WordOffice from './components/WordOffice'
import  AfterSales from "./components/AfterSales";
import { MyApprovalDetailsAll } from './style'
import { message, PageHeader, Typography, Timeline  } from 'antd'

const { Title } = Typography;

/**
 * @description: 费用申请的详情
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-14）
 */

const MyApprovalDetails = () => {
    const history = useHistory()
    const location = useLocation()
    const [detailsData, setDetailsData] = useState({}) //详情数据
    const detailsFun = useCallback(
        () => {
            const parames = {
                serialNo: location.state.serialNo
            }
            ; (async () => {
                const { code, msg, data } = await getAccOverallParticular(parames)
                if (code === '20000') {
                    setDetailsData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [location.state],
    )
    useEffect(() => {
        detailsFun()
    }, [detailsFun])
    const basicHtml = () => {
        switch (location.state.sub) {
            case 0: //推广
                return <Popularize detailsData = {detailsData}/>
            case 1: //标书
                return <Tender detailsData = {detailsData}/>
            case 2: //佣金
                return <Commission detailsData = {detailsData}/>
            case 3: //运输
                return <Transportation detailsData = {detailsData}/>
            case 4: //水电油
                return <WaterElectricOil detailsData = {detailsData}/>
            case 5: //其他
                return <ElseCost detailsData = {detailsData}/>
            case 6: //出差
                return <BusinessTravel detailsData = {detailsData}/>
            case 7: //汽车
                return <Car detailsData = {detailsData}/>
            case 8: //售后
                return <AfterSales detailsData = {detailsData}/>
            case 9: //招待
                return <Entertain detailsData = {detailsData}/>
            case 10: //服务
                return <Serve detailsData = {detailsData}/>
            case 11: //办公
                return <WordOffice detailsData = {detailsData}/>
            default:
                break;
        }
    }
    return <MyApprovalDetailsAll>
        <PageHeader
            className="site-page-header"
            title={FinancialFromType[location.state.sub]}
            onBack={() => history.go('-1')}
        />
        <Title level={3}>基本详情</Title>
        {
            basicHtml()
        }
        <Title level={3}>时间轴</Title>
        <Timeline>
            {
                detailsData.history && detailsData.history.map(item => <Timeline.Item>{item.executeUser}:{item.name} {item.startTime}</Timeline.Item>)
            }
        </Timeline>
    </MyApprovalDetailsAll>
}

export default MyApprovalDetails